<template>
    <div class="final-found-item" v-if="(dataArr && dataArr.length > 0)">
        <van-pull-refresh v-model="refreshing" success-text="刷新成功" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <KeepAlive>
                    <masonry-view :dataArr="dataArr" :video="video" :switchSelected="switchSelected" />
                </KeepAlive>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from "vue"
import { Api } from "@/utils/apis"
import { showToast } from 'vant';
import type { DataType } from "@/typings"
import MasonryView from "@/components/HomeComponents/FoundComponents/MasonryView.vue";

const video = ref(true)
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
let dataArr = ref<DataType[]>([])

// 获取数据
const getVideo = async () => {
    let data = await Api.getVideo()
    dataArr.value = data?.data?.list
    // console.log(data);
}

// 获取push数据
const getPushVideo = async () => {
    let data = await Api.getVideo()
    dataArr.value.push(...data?.data?.list)
}


const onLoad = () => {
    if (refreshing.value) {
        dataArr.value = [];
        refreshing.value = false;
    }
    // 异步更新数据
    //  axios 请求
    getPushVideo()

    // 加载状态结束 
    loading.value = false;

    // 数据全部加载完成
    if (dataArr.value.length >= 100) {
        finished.value = true;
    }
};

const onRefresh = () => {
    // 清空列表数据
    finished.value = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    onLoad();
    showToast('刷新成功');
};

// const switchSelected = (id, src) => {
const switchSelected = (id: number) => {
    // this.$nextTick(() => {
    dataArr.value.forEach(r => {
        if (r.itemId === id) {
            if (r.postData.postCount.viewCount == 1) {
                r.postData.postCount.viewCount = 0;
                r.postData.postCount.favoriteCount -= 1;
            } else {
                r.postData.postCount.viewCount = 1;
                r.postData.postCount.favoriteCount += 1;
            }
        }
    });
    // this.$store.commit("toggleMyLike", { id, src });
    // console.log(this.$store.state.myLike);
    // })
};


onMounted(() => {
    getVideo()
})


</script>
  
<style scoped lang="scss">
.final-found-item {
    width: 98vw;
    margin: 0px auto;
    margin-top: 10px;
    margin-bottom: 55px;

    img {
        width: 100%;
        height: 100%;
    }

    ::v-deep(.my-swipe) {
        ::v-deep(.van-swipe-item) {
            color: #fff;
            font-size: 20px;
            line-height: 150px;
            text-align: center;
            background-color: #39a9ed;
        }
    }

    ::v-deep(.van-swipe-item) {
        height: 117.75px;
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: rgb(255, 255, 255);
    }

    ::v-deep(.van-skeleton__row) {
        height: 30px !important;
    }
}
</style>